
h1,h2       { font-size:16px; font-weight:bold; margin:0; }
h3,h4,h5,h6 { font-size:14px; font-weight:bold; margin:0; }

a       { color:#7092ff; }
a:hover { color:#597be7; }
 button {
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  }

.point {cursor:pointer;}

/*

 button, .button { background-color:#999; color:#fff; }
  button.active, .button.active,
  button:hover, .button:hover { background-color:#333; color:#fff; }*/
  .button { background-color:#999; color:#fff; }
  .button.active,.button:hover { background-color:#333; color:#fff; }


.small,
.button     { font-size:12px; }
.button.big { font-size:14px; }

/*button.loud, .button.loud { background-color:#7092ff; }
button.loud:hover, .button.loud:hover { background-color:#597be7; }*/
.loud, .button.loud { background-color:#7092ff; }
.loud:hover, .button.loud:hover { background-color:#597be7; }

.loud-red, .button.loud-red { background-color:#f94646; }
.loud-red:hover, .button.loud-red:hover { background-color:#ddadad; }


.button {
  background-color:#999; color:#fff;
  border-radius:4px;
  font-weight:bold;
  text-align:center;
  }
  form .button.active { border-radius:4px 4px 0 0; }

.button.fill-grey,
.button.fill-darken0 { color:#333; }

.button.fill-grey:focus,
.button.fill-grey:hover { background-color:#aaa; color:#333; }
.button.fill-darken0:focus,
.button.fill-darken0:hover { background-color:rgba(0,0,0,0.10); color:#333; }

#header       { height:60px; }
#app          { top:0px; height:100%;}
#app .sidebar { min-width:240px; z-index:10; padding-bottom:60px; }

nav a       { color:#444; }
nav a:hover { color:#444; }
.logo:hover, nav a:hover { background-color:rgba(0,0,0,0.25); }

#jobs nav a:hover,
#app nav a:hover { background-color:#f8f8f8; }

._icon.big   { line-height:40px; }
._icon       { line-height:20px; }
._icon, ._icon:hover            { color:#444; }
._icon.dark, ._icon.dark:hover  { color:#fff; }

input.round        { border-radius:4px; }
.round        { border-radius:4px; }
.round-top    { border-radius:4px 4px 0 0; }
.round-right  { border-radius:0 4px 4px 0; }
.round-bottom { border-radius:0 0 4px 4px; }
.round-left   { border-radius:4px 0 0 4px; }
.unround      { border-radius:0;}

.dark   { color:#fff; }
.quiet  { color:rgba(68,68,68,0.5); }
.strong { font-weight:bold; }

.logo > span {
  background:transparent url(img/logo.png) no-repeat 0 0;
  height:60px;
  width:120px;
  display:block;
  padding:0 20px;
  opacity:0.5;
  -webkit-transition:opacity 100ms;
     -moz-transition:opacity 100ms;
       -o-transition:opacity 100ms;
          transition:opacity 100ms;
  }
  .logo:hover > span { opacity:1; }

.rcon:after,
._icon:before {
  background:transparent url(img/sprite@2x.png) no-repeat 0 0;
  content:'';
  display:inline-block;
  width:20px;
  height:20px;
  vertical-align:top;
  -webkit-background-size:600px 120px;
          background-size:600px 120px;
  }
  .rcon.big:after,
  ._icon.big:before {
    width:40px;
    height:40px;
    }
  .rcon.quiet:after,
  ._icon.quiet:before {
    opacity:0.5;
    }
  .rcon.quiet:hover:before,
  .rcon.quiet.active:before,
  ._icon.quiet:hover:before,
  ._icon.quiet.active:before {
    opacity:1;
    }

._loading > * {
  background-image: url(img/loading-spin.svg);
  background-repeat:no-repeat;
  background-position:0 0;
  display:inline-block;
  width:40px;
  height:40px;
  vertical-align:middle;
  }
._loading._icon,
._loading.rcon {
  background:transparent url(img/loading-spin-dark.svg) no-repeat 0 0;
  }
  ._loading._icon:before,
  ._loading.rcon:after {
    display:none;
    }



._loadingSmall > * {
  background-image: url(img/loading-spin-small.svg);
  background-repeat:no-repeat;
  background-position:0 0;
  display:inline-block;
  width:40px;
  height:40px;
  vertical-align:middle;
  }



._osm {
  background-image: url(img/mag_map.svg);
  background-repeat:no-repeat;
  background-position:0 0;
  background-size: contain;
  vertical-align:middle;
 }


.hoot_label {
    background: url(img/logo/hoot_logo_update.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    vertical-align: middle;
    height: 60px;
    margin-left: 10px;
}



.rcon.sprocket:after, ._icon.sprocket:before                   { background-position:0 0; }
.rcon.big.sprocket:after, ._icon.big.sprocket:before           { background-position:0 -20px; }
.rcon.dark.sprocket:after, ._icon.dark.sprocket:before         { background-position:0 -60px; }
.rcon.dark.big.sprocket:after, ._icon.dark.big.sprocket:before { background-position:0 -80px; }

.rcon.data:after, ._icon.data:before                           { background-position:-40px 0; }
.rcon.big.data:after, ._icon.big.data:before                   { background-position:-40px -20px; }
.rcon.dark.data:after, ._icon.dark.data:before                 { background-position:-40px -60px; }
.rcon.dark.big.data:after, ._icon.dark.big.data:before         { background-position:-40px -80px; }

.rcon.conflate:after, ._icon.conflate:before                   { background-position:-80px 0; }
.rcon.big.conflate:after, ._icon.big.conflate:before           { background-position:-80px -20px; }
.rcon.dark.conflate:after, ._icon.dark.conflate:before         { background-position:-80px -60px; }
.rcon.dark.big.conflate:after, ._icon.dark.big.conflate:before { background-position:-80px -80px; }

.rcon.down:after, ._icon.down:before                           { background-position:-120px 0; }
.rcon.big.down:after, ._icon.big.down:before                   { background-position:-120px -20px; }
.rcon.dark.down:after, ._icon.dark.down:before                 { background-position:-120px -60px; }
.rcon.dark.big.down:after, ._icon.dark.big.down:before         { background-position:-120px -80px; }

.rcon.info:after, ._icon.info:before                           { background-position:-160px 0; }
.rcon.big.info:after, ._icon.big.info:before                   { background-position:-160px -20px; }
.rcon.dark.info:after, ._icon.dark.info:before                 { background-position:-160px -60px; }
.rcon.dark.big.info:after, ._icon.dark.big.info:before         { background-position:-160px -80px; }

.rcon.trash:after, ._icon.trash:before                         { background-position:-200px 0; }
.rcon.big.trash:after, ._icon.big.trash:before                 { background-position:-200px -20px; }
.rcon.dark.trash:after, ._icon.dark.trash:before               { background-position:-200px -60px; }
.rcon.dark.big.trash:after, ._icon.dark.big.trash:before       { background-position:-200px -80px; }

.rcon.reload:after, ._icon.reload:before                         { background-position:-240px 0; }

.rcon.linestring:after, ._icon.linestring:before               { background-position:-240px 0; }
.rcon.big.linestring:after, ._icon.big.linestring:before       { background-position:-240px -20px; }
.rcon.dark.linestring:after, ._icon.dark.linestring:before          { background-position:-240px -60px; }
.rcon.dark.big.linestring:after, ._icon.dark.big.linestring:before  { background-position:-240px -80px; }

.rcon.marker:after, ._icon.marker:before                       { background-position:-280px 0; }
.rcon.big.marker:after, ._icon.big.marker:before               { background-position:-280px -20px; }
.rcon.dark.marker:after, ._icon.dark.marker:before             { background-position:-280px -60px; }
.rcon.dark.big.marker:after, ._icon.dark.big.marker:before     { background-position:-280px -80px; }

.rcon.poly:after, ._icon.poly:before                           { background-position:-320px 0; }
.rcon.big.poly:after, ._icon.big.poly:before                   { background-position:-320px -20px; }
.rcon.dark.poly:after, ._icon.dark.poly:before                 { background-position:-320px -60px; }
.rcon.dark.big.poly:after, ._icon.dark.big.poly:before         { background-position:-320px -80px; }

.rcon.check:after, ._icon.check:before                         { background-position:-360px 0; }
.rcon.big.check:after, ._icon.big.check:before                 { background-position:-360px -20px; }
.rcon.dark.check:after, ._icon.dark.check:before               { background-position:-360px -60px; }
.rcon.dark.big.check:after, ._icon.dark.big.check:before       { background-position:-360px -80px; }

.rcon.folderplus:after, ._icon.folderplus:before					 		 { background-position:-410px -30px; }
.rcon.plus:after, ._icon.plus:before                           { background-position:-400px 0; }
.rcon.big.plus:after, ._icon.big.plus:before                   { background-position:-400px -20px; }
.rcon.dark.plus:after, ._icon.dark.plus:before                 { background-position:-400px -60px; }
.rcon.dark.big.plus:after, ._icon.dark.big.plus:before         { background-position:-400px -80px; }

.rcon.x:after, ._icon.x:before, ._icon.logout-icon:before                            { background-position:-440px 0; }
.rcon.big.x:after, ._icon.big.x:before, ._icon.big.logout-icon:before                { background-position:-440px -20px; }
.rcon.dark.x:after, ._icon.dark.x:before, ._icon.dark.logout-icon:before             { background-position:-440px -60px; }
.rcon.dark.big.x:after, ._icon.dark.big.x:before, ._icon.dark.big.logout-icon:before { background-position:-440px -80px; }

.rcon.folder:after, ._icon.folder:before                       { background-position:-480px 0; }
.rcon.big.folder:after, ._icon.big.folder:before               { background-position:-480px -20px; }
.rcon.dark.folder:after, ._icon.dark.folder:before             { background-position:-480px -60px; }
.rcon.dark.big.folder:after, ._icon.dark.big.folder:before     { background-position:-480px -80px; }

.rcon.up:after, ._icon.up:before                             	 { background-position:-520px 0; }
.rcon.big.up:after, ._icon.big.up:before                       { background-position:-510px 10px; }
.rcon.dark.up:after, ._icon.dark.up:before                     { background-position:-520px -60px; }
.rcon.dark.big.up:after, ._icon.dark.big.up:before             { background-position:-520px -80px; }

 .rcon.disk:after, ._icon.disk:before                          { background-position:-560px 0; }
 .rcon.big.disk:after, ._icon.big.disk:before                  { background-position:-560px -20px; }
 .rcon.dark.disk:after, ._icon.dark.disk:before                { background-position:-560px -60px; }
 .rcon.dark.big.disk:after, ._icon.dark.big.disk:before        { background-position:-560px -80px; }

 .rcon.openeye:after, ._icon.openeye:before                    { background-position:-520px -30px; }
 .rcon.closedeye:after, ._icon.closedeye:before  		           { background-position:-480px -30px; }

 .rcon.export:after, ._icon.export:before                	     { background-position:-330px 0px; }

 .rcon.big.refresh:after, ._icon.big.refresh:before						 { background-position:-205px -80px; }
 .rcon.big.blank:after, ._icon.big.blank:before                { background-position:-260px 15px; }

 .rcon.openfolder:after, ._icon.openfolder:before							 { background-position:-84px 0px; }

.palette .active:before {
  position:relative;
  top:10px;
  left:10px;
  opacity:0.5;
  }

.gold .thumbnail, .gold ._loading      { background-color:#ffcc00; }
.orange .thumbnail, .orange ._loading  { background-color:#ff7f2a; }
.violet .thumbnail, .violet ._loading  { background-color:#ff5599; }
.purple .thumbnail, .purple ._loading  { background-color:#e580ff; }
.blue .thumbnail, .blue ._loading      { background-color:#5fbcd3; }
.teal .thumbnail, .teal ._loading      { background-color:#5fd3bc; }
.green .thumbnail, .green ._loading   { background-color:#A7C973; }

.fill-red {background-color:#AF0046;}
.fill-gold   { background-color:#ffcc00; }
.fill-orange { background-color:#ff7f2a; }
.fill-violet { background-color:#ff5599; }
.fill-purple { background-color:#e580ff; }
.fill-blue   { background-color:#5fbcd3; }
.fill-teal   { background-color:#5fd3bc; }
.fill-green  { background-color:#a7c973; }
.fill-light   { background-color:#f8f8f8; }
.fill-white   { background-color:#fff; }
.fill-dark    { background-color:#444; }
.fill-darken  { background-color:rgba(0,0,0,0.25); z-index:1000;}
.fill-darken0 { background-color:rgba(0,0,0,0.05); z-index:1000; }
.fill-darken1 { background-color:rgba(0,0,0,0.25); z-index:1000; }
.fill-darken2 { background-color:rgba(0,0,0,0.50); z-index:1000; }
.fill-darken3 { background-color:rgba(0,0,0,0.75); z-index:1000; overflow:auto;}

.modal {
  /*display:none;*/
  position:absolute; left:60%; top:10%; z-index:2001;
  margin:0 0 0 -25%;
  }
.mask {
  background:rgba(0,0,0,0.65);
  display:none;
  position:absolute; z-index:2000;
  width:100%; height:100%;
  top:0;
  }
.modal:target,
.modal:target ~ .mask { display:block; }

.status { font-weight:normal; }
.active + .hidden { display:block; width: 100%;}

/* Importing Interactions */
.controller {
  min-height:60px;
  }
  .controller .action {
    background-color:#f8f8f8;
    position:absolute;
    top:0;
    right:0;
    width:40px;
    height:60px;
    }
    .controller .action:hover   { background-color:#fff; }
    .controller .action.active  { background-color:#333; border-radius:0 4px 0 0; }

.palette { width: 284px;}
.palette a { width:40px; height:40px;}
.palette, .palette a { border-color:#444; }
.palette a:first-child { border-radius:4px 0 0 4px; }
.palette a:last-child { border-radius:0 4px 4px 0; border:none; }
._osm {margin-left: 2px;}

.palette a.active { box-shadow:inset 0 0 0 4px rgba(0,0,0,0.25); }

/* Jobs Interactions */
#jobs nav > div {
  padding-right:80px;
  }
#jobs nav .action {
  width:40px;
  height:40px;
  }

/* Conflation */
.conflate-heading .thumb {
  margin:0 5px;
  }
.conflate-heading:after {
  background:rgba(0,0,0,0.10);
  content:'';
  position:absolute;
  display:block;
  top:18px;
  height:5px;
  width:10px;
  left:50%;
  margin-left:-5px;
  }



span.logo{
  color: #999;
  margin: 0 5px;
  }

.hoverDiv2:hover{
  background-color:#ECECEC;
}

.hoverDiv:hover{
  background-color:#f8f8f8;
}

.tall {height:100%;}

.hoot-menu {margin-bottom:5px;}

.show-link {
	font-size: 12px;
	font-weight: bold;
	font-style: italic;
}
 div.bulk-import, div.bulk-export, div.tag-override {
 	padding-right: 10px;
 }

 input.bulk-import, input.bulk-export, input.tag-override {
 	padding-right: 10px;
 	width:100%;
 	border: 1px lightgray;
 }

#alerts {
	position: fixed;
	z-index: 1003;
	clear:both;
	margin-left:10px;
	float:right;
	right:45px;
  top:130px;
  width: 290px;
}

.alertDiv {
  /*float:left;
  overflow-y:auto;*/
	width: 290px;
  max-height: 290px;
	padding:5px 0px 5px 5px;
	border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  background:rgba(150,150,150,.5);
  margin-bottom: 4px;
}

.alertDiv.red 		{	background:rgba(255,0,0,.5); border-color: #a00000;}
.alertDiv.yellow 	{	background:rgba(206,216,15,.5);	border-color: #aaa800;}
.alertDiv.green 	{	background:rgba(8,170,0,.5); border-color: #045b00;	}
.alertDiv.blue 		{ background:rgba(0,101,255,.5); border-color: #0254d1;	}}

.alertDiv h1, h2, h3, h4, h5 {
	/* margin-left: 10px;
	display: inline-block; */
}

/*.alertDiv h3 {
  color: #ffffff;
  opacity: 0.8;
  font-weight: normal;
}*/

/* The More Detail Modal */
.detailModal {
  position: absolute; left:40%; top:10%; z-index:1004;
  margin: 0 0 0 -25%;
  word-wrap: break-word;
}

/*** CLIP TOOL ***/
.clipMenu {
  display:block;
  margin-left:auto;
  margin-right:auto;
  left:0%;
}

.exportbox {
  border: 1px solid #ccc;
  background: #eee;
  border-radius: 3px;
  text-align: center;
}
.export_bound {
  margin: 5px;
}

.exportbox input {
  width:120px;
  text-align: center;
  margin-bottom: 5px;
}
.exportbox #maxlat {margin-top: -1px;}
.exportbox #minlon {float: left; margin-left: -1px;}
.exportbox #maxlon {float: right; margin-right: -1px;}
.exportbox #minlat {margin-bottom: -1px;}


.clipInfo {font-weight:bold;}
.invalidName {border:1px solid red !important;}
.validName {border:1px solid green !important;}

/*** SETTINGS ***/
#settingsSidebar{width:220px;}
 #settingsHeader{font-weight:bolder;font-size:large;}
.utilHoot{left:220px;}

.logHeader{font-weight:bolder;font-size:large;float:left;}

.aboutHeader{float:left;font-weight:bold;width:100%;text-align:left;}

.map-button {
  width:39px;
  height:60px;
}
.tag-row .map-metadata {
    /*float: left;*/
    height: 30px;
    overflow: hidden;
    padding: 4px 6px;
    color: #a0a0a0;
    font-size: 13px;
}
.tag-row .map-metadata.key {
    width: 40%;
    font-weight: bold;
}
.tag-row .map-metadata.value {
    width: 60%;
}
.tar {
    text-align: right;
}
tr.tag-row td {
    padding: 4px 6px;
    overflow: hidden;
}
tr.tag-row td.key {
    font-weight: bold;
}

table.map-metadata {
    border-collapse:separate;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    overflow: hidden;
    color: #a0a0a0;
    font-size: 13px;
}

/*About Icon*/
.about_icon{
  width: 25px;
  float: left;
  padding-right: 5px;
  padding-top: 23px; /*Puts I in the visual center of label*/
}

/*Hootenanny label*/
/* got rid of this when we added the new logo
/*.hoot_label{
  height: 20px;
  line-height:20px;
  color: white;
  padding-top: 20px;
  padding-left: 5px;
  font-size: 20px;
  letter-spacing: -1px;
}*/

/*Divider in label*/
.divider{
  color: #999;
  margin: 0 5px;
}

/*Add cursor*/
.cursor{
  cursor: url(img/cursor-pointer.png) 6 1, pointer;
}

.margin2y{
  margin: 20px 0;
}

/* Import Directory CSS */
option.importSuccess {
	background-color: rgba(51,204,51,1);
	font-weight: bold;
}

option.importProgress {
	background-color: rgba(255,255,102,1);
	font-weight: bold;
}

option.importError {
	background-color: rgba(255.51.0,1);
	font-weight: bold;
}

#datasettableHeader {
  padding: 3px 20px;
  background-color: #444;
  color: white;
  width: 100%;
  height: 25px;
}

foreignObject.expiring {
  background: transparent url(img/timer.png) no-repeat 0 0;
  height: 18px;
  width: 18px;
  background-size: 100%;
}

.tooltip-old-dataset {
    pointer-events:none;
    opacity:0;
    transition: opacity 0.3s;
}

div.tooltip-old-dataset {
    color: white;
    font-size: 10;
    font-weight: normal;
    background: #0000008a;
    position: absolute;
    max-width: 240px;
    text-align:center;
    padding: 5px;
    border-radius:4px 4px 4px 4px;
}